// Element Plus AI科技风格主题覆盖
:root {
  // 主色调 - 蓝色系
  --el-color-primary: var(--ai-primary);
  --el-color-primary-light-3: var(--ai-primary-light);
  --el-color-primary-light-5: rgba(59, 130, 246, 0.8);
  --el-color-primary-light-7: rgba(59, 130, 246, 0.6);
  --el-color-primary-light-8: rgba(59, 130, 246, 0.4);
  --el-color-primary-light-9: rgba(59, 130, 246, 0.2);
  --el-color-primary-dark-2: #1e40af;
  
  // 成功色
  --el-color-success: #2ed573;
  --el-color-success-light-3: rgba(46, 213, 115, 0.8);
  --el-color-success-light-5: rgba(46, 213, 115, 0.6);
  --el-color-success-light-7: rgba(46, 213, 115, 0.4);
  --el-color-success-light-8: rgba(46, 213, 115, 0.2);
  --el-color-success-light-9: rgba(46, 213, 115, 0.1);
  
  // 警告色
  --el-color-warning: #ffa502;
  --el-color-warning-light-3: rgba(255, 165, 2, 0.8);
  --el-color-warning-light-5: rgba(255, 165, 2, 0.6);
  --el-color-warning-light-7: rgba(255, 165, 2, 0.4);
  --el-color-warning-light-8: rgba(255, 165, 2, 0.2);
  --el-color-warning-light-9: rgba(255, 165, 2, 0.1);
  
  // 危险色
  --el-color-danger: #ff4757;
  --el-color-danger-light-3: rgba(255, 71, 87, 0.8);
  --el-color-danger-light-5: rgba(255, 71, 87, 0.6);
  --el-color-danger-light-7: rgba(255, 71, 87, 0.4);
  --el-color-danger-light-8: rgba(255, 71, 87, 0.2);
  --el-color-danger-light-9: rgba(255, 71, 87, 0.1);
  
  // 信息色
  --el-color-info: var(--ai-text-tertiary);
  --el-color-info-light-3: rgba(160, 174, 192, 0.8);
  --el-color-info-light-5: rgba(160, 174, 192, 0.6);
  --el-color-info-light-7: rgba(160, 174, 192, 0.4);
  --el-color-info-light-8: rgba(160, 174, 192, 0.2);
  --el-color-info-light-9: rgba(160, 174, 192, 0.1);
  
  // 背景色
  --el-bg-color: var(--ai-bg-primary);
  --el-bg-color-overlay: var(--ai-bg-card);
  --el-bg-color-page: var(--ai-bg-secondary);
  
  // 文字色
  --el-text-color-primary: var(--ai-text-primary);
  --el-text-color-regular: var(--ai-text-secondary);
  --el-text-color-secondary: var(--ai-text-tertiary);
  --el-text-color-placeholder: var(--ai-text-tertiary);
  --el-text-color-disabled: rgba(160, 174, 192, 0.5);
  
  // 边框色
  --el-border-color: var(--ai-border);
  --el-border-color-light: var(--ai-border-light);
  --el-border-color-lighter: var(--ai-border-light);
  --el-border-color-extra-light: var(--ai-border-light);
  
  // 填充色
  --el-fill-color: var(--ai-bg-card);
  --el-fill-color-light: var(--ai-bg-secondary);
  --el-fill-color-lighter: var(--ai-bg-secondary);
  --el-fill-color-extra-light: var(--ai-bg-primary);
  --el-fill-color-dark: var(--ai-bg-secondary);
  --el-fill-color-darker: var(--ai-bg-secondary);
  
  // 阴影
  --el-box-shadow: var(--ai-shadow-sm);
  --el-box-shadow-light: var(--ai-shadow-sm);
  --el-box-shadow-dark: var(--ai-shadow-md);
  
  // 圆角
  --el-border-radius-base: var(--ai-radius-sm);
  --el-border-radius-small: var(--ai-radius-sm);
  --el-border-radius-round: var(--ai-radius-md);
  --el-border-radius-circle: 50%;
}

// 按钮样式覆盖
.el-button {
  border-radius: var(--ai-radius-md);
  font-weight: 600;
  transition: all var(--ai-transition-normal) ease;
  
  &--primary {
    background: var(--ai-gradient-primary);
    border: none;
    box-shadow: var(--ai-shadow-sm);
    
    &:hover {
      background: var(--ai-gradient-primary);
      transform: translateY(-2px);
      box-shadow: var(--ai-shadow-lg);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  &--success {
    background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
    border: none;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(46, 213, 115, 0.3);
    }
  }
  
  &--warning {
    background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
    border: none;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(255, 165, 2, 0.3);
    }
  }
  
  &--danger {
    background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%);
    border: none;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(255, 71, 87, 0.3);
    }
  }
  
  &--info {
    background: var(--ai-bg-card);
    border: 1px solid var(--ai-border);
    color: var(--ai-text-secondary);
    
    &:hover {
      border-color: var(--ai-primary);
      color: var(--ai-primary);
      transform: translateY(-2px);
    }
  }
}

// 输入框样式覆盖
.el-input {
  .el-input__wrapper {
    background: var(--ai-bg-card);
    border: 2px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    box-shadow: none;
    transition: all var(--ai-transition-normal) ease;
    backdrop-filter: blur(20px);
    
    &:hover {
      border-color: var(--ai-border-accent);
    }
    
    &.is-focus {
      border-color: var(--ai-primary);
      box-shadow: var(--ai-shadow-sm);
    }
  }
  
  .el-input__inner {
    color: var(--ai-text-primary);
    
    &::placeholder {
      color: var(--ai-text-tertiary);
    }
  }
}

// 选择器样式覆盖
.el-select {
  .el-input__wrapper {
    background: var(--ai-bg-card);
    border: 2px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    
    &:hover {
      border-color: var(--ai-border-accent);
    }
    
    &.is-focus {
      border-color: var(--ai-primary);
      box-shadow: var(--ai-shadow-sm);
    }
  }
}

// 下拉菜单样式覆盖
.el-dropdown-menu {
  background: var(--ai-bg-secondary);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  backdrop-filter: blur(20px);
  box-shadow: var(--ai-shadow-md);
  
  .el-dropdown-menu__item {
    color: var(--ai-text-secondary);
    
    &:hover {
      background: var(--ai-bg-tertiary);
      color: var(--ai-primary);
    }
    
    &.is-disabled {
      color: var(--ai-text-tertiary);
      background: transparent;
    }
  }
}

// 表格样式覆盖
.el-table {
  background: transparent;
  color: var(--ai-text-secondary);
  
  &::before {
    display: none;
  }
  
  .el-table__header-wrapper {
    .el-table__header {
      background: var(--ai-bg-secondary);
      
      th.el-table__cell {
        background: var(--ai-bg-secondary);
        color: var(--ai-text-primary);
        border-bottom: 1px solid var(--ai-border);
        font-weight: 600;
      }
    }
  }
  
  .el-table__body-wrapper {
    .el-table__body {
      tr {
        background: var(--ai-bg-card);
        
        &:hover > td.el-table__cell {
          background: var(--ai-bg-tertiary);
        }
        
        td.el-table__cell {
          border-bottom: 1px solid var(--ai-border);
          color: var(--ai-text-secondary);
        }
      }
    }
  }
  
  .el-table__border-line {
    background: var(--ai-border);
  }
}

// 分页器样式覆盖
.el-pagination {
  .el-pager li {
    background: var(--ai-bg-card);
    color: var(--ai-text-secondary);
    border: 1px solid var(--ai-border);
    
    &:hover {
      color: var(--ai-primary);
      border-color: var(--ai-primary);
    }
    
    &.is-active {
      background: var(--ai-primary);
      color: var(--ai-text-primary);
      border-color: var(--ai-primary);
    }
  }
  
  .btn-prev,
  .btn-next {
    background: var(--ai-bg-card);
    color: var(--ai-text-secondary);
    border: 1px solid var(--ai-border);
    
    &:hover {
      color: var(--ai-primary);
      border-color: var(--ai-primary);
    }
  }
}

// 对话框样式覆盖
.el-dialog {
  background: var(--ai-bg-secondary);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-lg);
  backdrop-filter: blur(20px);
  box-shadow: var(--ai-shadow-lg);
  
  .el-dialog__header {
    border-bottom: 1px solid var(--ai-border);
    
    .el-dialog__title {
      color: var(--ai-text-primary);
      font-weight: 600;
    }
  }
  
  .el-dialog__body {
    color: var(--ai-text-secondary);
  }
  
  .el-dialog__footer {
    border-top: 1px solid var(--ai-border);
  }
}

// 消息提示样式覆盖
.el-message {
  background: var(--ai-bg-secondary);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  backdrop-filter: blur(20px);
  box-shadow: var(--ai-shadow-md);
  
  .el-message__content {
    color: var(--ai-text-secondary);
  }
  
  &.el-message--success {
    border-color: #2ed573;
    background: rgba(46, 213, 115, 0.1);
  }
  
  &.el-message--warning {
    border-color: #ffa502;
    background: rgba(255, 165, 2, 0.1);
  }
  
  &.el-message--error {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
  }
  
  &.el-message--info {
    border-color: var(--ai-primary);
    background: rgba(0, 212, 255, 0.1);
  }
}

// 通知样式覆盖
.el-notification {
  background: var(--ai-bg-secondary);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  backdrop-filter: blur(20px);
  box-shadow: var(--ai-shadow-md);
  
  .el-notification__title {
    color: var(--ai-text-primary);
  }
  
  .el-notification__content {
    color: var(--ai-text-secondary);
  }
}

// 标签样式覆盖
.el-tag {
  border-radius: var(--ai-radius-sm);
  font-weight: 500;
  
  &--primary {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--ai-primary);
  }
  
  &--success {
    background: rgba(46, 213, 115, 0.1);
    border-color: rgba(46, 213, 115, 0.3);
    color: #2ed573;
  }
  
  &--warning {
    background: rgba(255, 165, 2, 0.1);
    border-color: rgba(255, 165, 2, 0.3);
    color: #ffa502;
  }
  
  &--danger {
    background: rgba(255, 71, 87, 0.1);
    border-color: rgba(255, 71, 87, 0.3);
    color: #ff4757;
  }
  
  &--info {
    background: rgba(160, 174, 192, 0.1);
    border-color: rgba(160, 174, 192, 0.3);
    color: var(--ai-text-tertiary);
  }
}

// 卡片样式覆盖
.el-card {
  background: var(--ai-bg-card);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  backdrop-filter: blur(20px);
  transition: all var(--ai-transition-normal) ease;
  
  &:hover {
    border-color: var(--ai-border-accent);
    box-shadow: var(--ai-shadow-md);
    transform: translateY(-2px);
  }
  
  .el-card__header {
    border-bottom: 1px solid var(--ai-border);
    
    .el-card__header-title {
      color: var(--ai-text-primary);
      font-weight: 600;
    }
  }
  
  .el-card__body {
    color: var(--ai-text-secondary);
  }
}

// 菜单样式覆盖
.el-menu {
  background: var(--ai-bg-secondary);
  border: none;
  
  .el-menu-item {
    color: var(--ai-text-secondary);
    
    &:hover {
      background: var(--ai-bg-tertiary);
      color: var(--ai-primary);
    }
    
    &.is-active {
      background: var(--ai-primary);
      color: var(--ai-text-primary);
    }
  }
  
  .el-sub-menu__title {
    color: var(--ai-text-secondary);
    
    &:hover {
      background: var(--ai-bg-tertiary);
      color: var(--ai-primary);
    }
  }
}

// 侧边栏样式覆盖
.el-aside {
  background: var(--ai-bg-secondary);
  border-right: 1px solid var(--ai-border);
}

// 头部样式覆盖
.el-header {
  background: var(--ai-bg-secondary);
  border-bottom: 1px solid var(--ai-border);
  backdrop-filter: blur(20px);
}

// 主内容区样式覆盖
.el-main {
  background: var(--ai-bg-primary);
}

.el-collapse {
  .collapse__title {
    font-weight: 600;
    padding: 0 8px;
    font-size: 1.2em;
    line-height: 1.1em;
  }
  .el-collapse-item__content {
    padding: 0 8px;
  }
}

.el-divider--horizontal {
  margin-bottom: 10px;
  margin-top: 10px;
}

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type='file'] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0px;
    }
  }
}

/*-------------Dialog-------------**/
.el-overlay {
  overflow: hidden;

  .el-overlay-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .el-dialog {
      margin: 0 auto !important;

      .el-dialog__body {
        padding: 15px !important;
      }
      .el-dialog__header {
        padding: 16px 16px 8px 16px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--brder-color);
        margin-right: 0;
      }
    }
  }
}

.el-dialog__body {
  max-height: calc(90vh - 111px) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-dropdown .el-dropdown-link {
  color: var(--el-color-primary) !important;
}

/* 当 el-form 的 inline 属性为 true 时 */
/* 设置 label 的宽度默认为 68px */
.el-form--inline .el-form-item__label {
  width: 68px;
}

/* 设置 el-select 的宽度默认为 240px */
.el-form--inline .el-select {
  width: 240px;
}

/* 设置 el-input 的宽度默认为 240px */
.el-form--inline .el-input {
  width: 240px;
}

/* 设置 el-message-box 消息弹框内容强制换行 */
.el-message-box .el-message-box__message {
  word-break: break-word;
}
